<template>
  <div class="w-full h-16 bg-white shadow-md flex items-center justify-between sticky top-0 left-0 right-0 z-10">
    <div
      class="h-full aspect-square flex items-center justify-center gap-2 hover:bg-gray-100 transition cursor-pointer"
      @click="goBack"
    >
      <i-ep-back class="cursor-pointer" />
    </div>

    <div class="border-x h-full flex-grow px-4">
      <slot />
    </div>

    <div class="h-full aspect-square flex items-center justify-center">
      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

const goBack = () => {
  router.push("/home");
};
</script>

<style scoped></style>
